﻿@model OnlineViewModel

<script type="text/javascript">
	function saveStepData() {
		window.OnlineContent.Categories = "";
		var items = $("input[name='Category']");
		for (var i = 0; i < items.length; i++) {
			if (items[i].checked) {
				window.OnlineContent.Categories += $(items[i]).data("cat") + ";";
			}
		}
	}

	function loadStepData() {
		if (window.OnlineContent.Categories && window.OnlineContent.Categories != "") {
			var ids = window.OnlineContent.Categories.toString().split(";");
			for (var i = 0; i < ids.length; i++) {
				if ($("#category_" + ids[i]).length > 0) {
					$("#category_" + ids[i])[0].checked = true;
				}
			}
		}

		$("#wizard form").validate({
			rules: {
				Category: {
					required: true
				}
			},
			errorPlacement: function (error, element) {
				error.insertAfter($("#categoryTitle"));
				error.append("<br/><br/>");
			},
			messages: {
				Category: {
					required: "@Html.GetGlobalResource("OnlineWizard", "CategoriesRequired")"
				}
			}
		});
	}
</script>

<form>
    <div class="steps"><h4>Step 3 of 5</h4></div>
	<h3 id="categoryTitle">@Html.GetGlobalResource("OnlineWizard", "Categories")</h3>
	<br />
    <ul class="categories_zone">
        @foreach (var category in Model.Categories)
        {
            <li class="categories_list">
                <div class="cat_title">
                    <div class="chk"><input id="category_@category.Id" data-cat="@category.Id" type="checkbox" name="Category" /></div>                 
                    <div class="name"><label for="category_@category.Id">@category.Title</label></div>
                </div>
                <img src="@category.ImageUrl"/>
                <br />
                <br />
            </li>
    }
    </ul>
</form>